<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue';
import { Renderer } from './Renderer.js';
import { Parser } from './Parser.js';

const emits = defineEmits(['stage']);
const props = defineProps({
  data: { type: Object, required: true },
});

const viewer = ref(null);
let renderer;
let refreshId;

onMounted(() => {
  renderer = new Renderer(viewer.value);
});

onUnmounted(() => {
  renderer && renderer.destroy();
});

watch(props.data, () => {
  clearInterval(refreshId);
  refreshId = setTimeout(() => {
    renderer && renderer.load(new Parser(props.data));
  }, 300);
}, { immediate: true, deep: true });
</script>

<template>
  <div class="MapEditor" ref="viewer"></div>
</template>

<!-- 允许自定义宽高通过CSS进行控制 -->
<style scoped>
.MapEditor {
  width: 100%;
  height: 100%;
  background-color: gray;
}
</style>